<template>
    <view class="jk-page-container bg">
        <u-sticky>
            <view style="background: #fff;padding: 14rpx 24rpx;">
                <u-search
                    v-model="searchParams.nameOrCode"
                    :inputStyle="{ height: '38px', fontSize: '30rpx' }"
                    shape="round"
                    placeholder="客户名称或编号"
                    height="60rpx"
                    :showAction="true"
                    :clearabled="false"
                    :disabled="disabled"
                    inputAlign="center"
                    :actionStyle="{ color: '#808695', fontSize: '16px' }"
                    @search="onSearchBtn"
                    @clear="onSearchBtn('')"
                    @custom="onSearchBtn"
                ></u-search>
            </view>
        </u-sticky>
        <!--<jkSearchBar
            :search-val.sync="searchParams.nameOrCode"
            :searchLeftItemName="searchParams.customerName"
            :searchRightItemName="searchParams.belongDate"
            search-right-item-no-data-name="日期"
            placeholder="客户名称或编号"
            search-left-item-no-data-name="客户"
            @search="onSearchBtn"
            @search-left-item="selectCustomerPopupOptionState = true"
            @search-right-item="showSelectDatePicker = true"
        ></jkSearchBar>-->
        <view class="column-list-container" style="padding-bottom: 10px;box-sizing: border-box;">
            <view v-for="(item) in tableData" :key="item.id" class="column-list-item">
                <view>
                    <view class="column-list-item-default flex-between-center">
                        <view class="column-list-item-title">{{ item.name || '无' }}</view>
                        <!--<u-tag :text="item.auditState ? '已启用' : '已停用'" plain size="mini" :type="item.auditState ? 'success' : 'error'"></u-tag>-->
                    </view>
                    <view class="column-list-item-default column-list-item-sub-title flex-between-center">
                        <view>结算客户：{{ item.settleCustomerName || '无' }}</view>
                    </view>
                    <view class="column-list-item-default column-list-item-sub-title flex-between-center">
                        <view>创建：{{ item.updaterName || '无' }}</view>
                    </view>
                    <view class="column-list-item-default column-list-item-sub-title flex-between-center">
                        <view>时间：{{ item.updateTime || '无' }}</view>
                    </view>
                </view>
                <view style="font-weight: 300;margin-top: 20rpx;">
                    <u-button @click="onToggleStateBtn(item)" type="text" size="normal">选择</u-button>
                </view>
            </view>
            <jk-no-more :pageNo="searchParams.pageNo" :show="isNoMore" />
        </view>
        <jkPopupOption
            :value="searchParams.workshopId"
            :show="selectWorkshopPopupOptionState"
            :optionList="workshopList"
            @visible-change="(e) => selectWorkshopPopupOptionState = e"
            @confirm="onConfirmOfSelectWorkshop"
        ></jkPopupOption>
        <jkPopupOption
            :value="searchParams.customerId"
            :show="selectCustomerPopupOptionState"
            :optionList="customerList"
            @visible-change="(e) => selectCustomerPopupOptionState = e"
            @confirm="onConfirmOfSelectCustomer"
        ></jkPopupOption>
        <u-datetime-picker
            :show="showSelectDatePicker"
            v-model="initTimeVal"
            :closeOnClickOverlay="true"
            mode="date"
            cancelText="清空"
            @confirm="onConfirmOfSelectDatePicker"
            @close="showSelectDatePicker = false"
            @cancel="onClearOfSelectDatePicker"
        ></u-datetime-picker>
    </view>
</template>

<script>
import {
    productionStockOutRecordUpdateAuditState,
    spinCustomerPage,
    spinProcessPage,
} from "../../../../api";
import {
    formatDate,
    isLastPage,
    pageConfig,
    showLoading
} from "../../../../utils/jk-utils";
import loadingMore from '../../../../mixins/loading-more';
import jkNoMore from "../../../../jk-components/jk-no-more";
import jkSearchBar from "../../../../jk-components/jk-search-bar";
import jkPopupOption from "../../../../jk-components/jk-popup-option";
export default {
    mixins: [loadingMore],
    components: {
        jkPopupOption,
        jkNoMore,
        jkSearchBar,
    },
    data() {
        return {
            apiConfig: {
                list: spinCustomerPage
            },
            searchParams: {
                pageNo: 1,
                pageSize: pageConfig.pageSize,
                totalCount: pageConfig.totalCount,
                nameOrCode: '',
                workshopId: '',
                workshopName: '',
                customerId: '',
                auditState: '1'
            },
            customerList: [],
            selectCustomerPopupOptionState: false,
            initTimeVal: '',
            selectWorkshopPopupOptionState: false,
            tableData: [],
            workshopList: [],
            showSelectDatePicker: false,
            selectedItem: {}
        }
    },
    onLoad(e) {
        this.initTimeVal = Date.now();
        // this.$set(this.searchParams, 'type', e.state);
        this.getDependentData();
    },
    onShow() {
        if (!this.searchParams.workshopId) {
            // this.$set(this.searchParams, 'workshopId', getApp().globalData.defaultWorkshop.id);
            // this.$set(this.searchParams, 'workshopName', getApp().globalData.defaultWorkshop.name);
        }
        this.workshopList = getApp().globalData.defaultWorkshop.list;
    },
    methods: {
        onToggleStateBtn(item) {
            let pages = getCurrentPages(); // 当前页的数据
            let prevPage = pages[pages.length - 2]; // 上一页的数据
            prevPage.$vm.getCustomerData(item); // 调用上一页 定义的方法
            wx.navigateBack({
                delta: 1
            })
        },
        onClearOfSelectDatePicker() {
            this.$set(this.searchParams, 'belongDate', '');
            this.showSelectDatePicker = false;
            this.getListRequest();
        },
        onConfirmOfSelectDatePicker(e) {
            this.$set(this.searchParams, 'belongDate', formatDate(e.value));
            this.showSelectDatePicker = false;
            this.getListRequest();
        },
        onConfirmOfSelectWorkshop(e, item) {
            this.$set(this.searchParams, 'pageNo', 1);
            this.$set(this.searchParams, 'workshopId', item.id);
            this.$set(this.searchParams, 'workshopName', item.name);
            this.selectWorkshopPopupOptionState = false;
            this.getListRequest();
        },
        onConfirmOfSelectCustomer(e, item) {
            this.$set(this.searchParams, 'pageNo', 1);
            this.$set(this.searchParams, 'customerId', item.id);
            this.selectCustomerPopupOptionState = false;
            this.getListRequest();
        },
        onClearOfSearchIpt() {
            this.$set(this.searchParams, 'nameOrCode', '');
            this.onSearchBtn();
        },
        onSearchBtn(e) {
            this.tableData = [];
            this.$set(this.searchParams, 'nameOrCode', e);
            this.getListRequest();
        },
        getCustomerListRequest() {
            return spinCustomerPage({ auditState: 1 }).then(res => {
                if (res.data.status === 200) {
                    this.customerList = res.data.res;
                }
            });
        },
        async getDependentData() {
            showLoading(true);
            this.searchParams.pageNo = 1;
            await this.getCustomerListRequest();
            await this.getListRequest();
            showLoading(false);
        },
        getListRequest() {
            // if (this.searchParams.workshopId) {
            showLoading(true);
            this.searchParams.pageNo = 1;
            let params = JSON.parse(JSON.stringify(this.searchParams));
            delete params.workshopName;
            delete params.workshopCode;
            delete params.totalCount;
            return this.apiConfig.list(params).then(res => {
                showLoading(false);
                if (res.data.status === 200) {
                    this.$set(this.searchParams, 'totalCount', res.data.count);
                    this.tableData = res.data.res;
                    this.isNoMore = isLastPage(this.searchParams.totalCount, this.searchParams.pageSize, this.searchParams.pageNo);
                }
            })
            // }
        }
    },
    onReachBottom() {
        this.getMore();
    }
}
</script>

<style lang="scss" scoped>
</style>
